<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="profession.id ? '专业信息详情' : '新增专业信息'"
  (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter" nzWidth="1200">

  <form nz-form [formGroup]="validateForm" #professionForm="ngForm">
    <div nz-row [nzGutter]="16">
      <b style="color: red;">基本信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>所属学院</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <app-academy-select [(academyId)]="profession.academyId" [academyName]="profession.academyName"
              [isPreView]="isPreView" *ngIf="!isPreView; else academyTemp">
            </app-academy-select>
            <ng-template #academyTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.academyName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="code" nzRequired>专业编码</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="codeErrorTpl">
            <input nz-input formControlName="code" [(ngModel)]="profession.code" placeholder="专业编码必填"
              *ngIf="!isPreView; else codeTemp">
            <ng-template #codeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入专业编码!
              </ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">
                该专业编码已存在!
              </ng-container>
              <ng-container *ngIf="control.hasError('blank')">
                不可输入空格!
              </ng-container>
            </ng-template>
            <ng-template #codeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.code }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="unitName" nzRequired>专业名称</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="nameErrorTpl">
            <input nz-input formControlName="name" [(ngModel)]="profession.name" placeholder="专业名称必填"
              *ngIf="!isPreView; else nameTemp">
            <ng-template #nameErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入专业名称!
              </ng-container>
              <ng-container *ngIf="control.hasError('pattern')">
                不能存在空格字符!
              </ng-container>
            </ng-template>
            <ng-template #nameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.name }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="shortName">专业简称</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzErrorTip="MaxLength is 10">
            <input nz-input formControlName="shortName" [(ngModel)]="profession.shortName" placeholder="专业简称选填"
              *ngIf="!isPreView; else shortNameTemp" maxlength="10">
            <ng-template #shortNameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.shortName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="showOrder" nzRequired [nzSpan]="10">显示顺序</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="showOrderErrorTpl">
            <nz-input-number [(ngModel)]="profession.showOrder" [nzMin]="0" [nzStep]="1" formControlName="showOrder"
              *ngIf="!isPreView; else showOrderTemp">
            </nz-input-number>
            <ng-template #showOrderErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入显示顺序!
              </ng-container>
            </ng-template>
            <ng-template #showOrderTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.showOrder }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <b style="color: red;">专业毕业学分最低要求</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="compulsoryCredit" nzRequired [nzSpan]="10">必修学分</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="compulsoryCreditTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.compulsoryCredit"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="compulsoryCredit"
              *ngIf="!isPreView; else compulsoryCreditTemp">
            </nz-input-number>
            <ng-template #compulsoryCreditTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #compulsoryCreditTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.compulsoryCredit }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="subjectBasedElective" nzRequired [nzSpan]="10">学科基础选修</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="subjectBasedElectiveErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.subjectBasedElective"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="subjectBasedElective"
              *ngIf="!isPreView; else subjectBasedElectiveTemp">
            </nz-input-number>
            <ng-template #subjectBasedElectiveErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #subjectBasedElectiveTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.subjectBasedElective }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="professionElective" nzRequired [nzSpan]="10">专业选修</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="professionElectiveErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.professionElective"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="professionElective"
              *ngIf="!isPreView; else professionElectiveTemp">
            </nz-input-number>
            <ng-template #professionElectiveErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #professionElectiveTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.professionElective }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="publicElective" nzRequired [nzSpan]="10">公共选修</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="publicElectiveErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.publicElective"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="publicElective"
              *ngIf="!isPreView; else publicElectiveTemp">
            </nz-input-number>
            <ng-template #publicElectiveErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #publicElectiveTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.publicElective }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="practiceCredit" nzRequired [nzSpan]="10">实践</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="practiceCreditErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.practiceCredit"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="practiceCredit"
              *ngIf="!isPreView; else practiceCreditTemp">
            </nz-input-number>
            <ng-template #practiceCreditErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #practiceCreditTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.practiceCredit }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="innovationScore" nzRequired [nzSpan]="10">创新分</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="innovationScoreErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.innovationScore"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="innovationScore"
              *ngIf="!isPreView; else innovationScoreTemp">
            </nz-input-number>
            <ng-template #innovationScoreErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #innovationScoreTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.innovationScore }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="graduationInternship" nzRequired [nzSpan]="10">毕业实习</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="graduationInternshipErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.graduationInternship"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="graduationInternship"
              *ngIf="!isPreView; else graduationInternshipTemp">
            </nz-input-number>
            <ng-template #graduationInternshipErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #graduationInternshipTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.graduationInternship }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="graduationThesis" nzRequired [nzSpan]="10">毕业论文</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="graduationThesisErrorTpl">
            <nz-input-number [(ngModel)]="profession.graduationCreditRequirements.graduationThesis"
              (ngModelChange)="getTotal()" [nzMin]="0" [nzStep]="0.01" formControlName="graduationThesis"
              *ngIf="!isPreView; else graduationThesisTemp">
            </nz-input-number>
            <ng-template #graduationThesisErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                不能空!
              </ng-container>
            </ng-template>
            <ng-template #graduationThesisTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ profession?.graduationCreditRequirements?.graduationThesis }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="total" nzRequired [nzSpan]="10">
            <b style="color: red;">合计学分</b>
          </nz-form-label>
          <nz-form-control [nzSpan]="14">
            <div class="editable-cell">
              <div class="editable-cell-value-wrap text-truncate">
                {{ profession?.graduationCreditRequirements?.total | number: '1.2-2' }}
              </div>
            </div>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

  <ng-template #detailFooter>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
